<script setup lang="ts">
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

// 计算属性
// 计算只写函数的写法，是只读的，可以取值，但是不能赋值
// const fullName = computed(() => {
//   return firstName.value + '---' + lastName.value
// })

// 完整的写法， 取值+赋值
const fullName = computed({
    // get 取值的会执行的逻辑
    get() {
        console.log('get执行啦~')
        return firstName.value + '|' + lastName.value
    },
    // 赋值会执行的逻辑
    // value 传入的值
    set(value) {
        console.log(value)
        // 接收到 value 自己写处理的逻辑

        // 比如 把 hey-bro 拆开
        // ['hey','bro']
        const arr = value.split('-')

        // hey 去 firstName
        firstName.value = arr[0]
        // bro 去 lastName
        lastName.value = arr[1]
    }
})
</script>

<template>
    <h2>{{ fullName }}</h2>
    <button @click="fullName = 'hey-bro'">修改fullName(计算属性)</button>
    <button @click="firstName += '!'">修改 firstName</button>
    <button @click="lastName += '!'">修改 lastName</button>
</template>

<style></style>